<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

{literal}
<script type="text/javascript" src="resource/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//判断是否首次加载
	var major_html = $("#major").html();
	if(major_html == ''){
		getMajor($(this).find("option:selected").text(), $(this).find("option:selected").val());
	}

	//改变学院时
	$("#department").change(function(){
		var department_name = $(this).find("option:selected").text();
		var department_val = $(this).find("option:selected").val();
		//alert(department_name + ":" + department_val);
		//$("#major").html("<option value='1'>" + department_name + "</option>");
		
		getMajor(department_name, department_val);
	});
	
});

function getMajor(department_names, department_vals){	
	var queryStr = "";
	var major_ary = new Array();

	//返回格式[{"major_id":"6","major_name":"\u82f1\u8bed","department_id":"3"}]
	$.post("test.php?act=ajax", {department_name:department_names, department_val:department_vals}, function(data){
		var result = data;

		//清空选项
		$("#major").html("");
		for(var json in result){
			$("#major").html($("#major").html() + "<option value='" + result[json].major_id + "'>" + result[json].major_name + "</option>");
		}
		
	}, 'json');
}

{/literal}
</script>
</head>

<body>
学院:
<select name="department" id="department" style="width:100px;">
{foreach from=$department_ary item=dep}
<option value="{$dep.id}">{$dep.name}</option>
{/foreach}
</select><br />

专业:
<select name="major" id="major" style="width:100px;"></select>
</body>
</html>